<template>
  <div class="paysucc">
    <div class="paysucctitle"><PaysuccTitle></PaysuccTitle></div>
    <div class="paysuccdiv">
      <div>
        <img src="../assets/success.png" alt="" />
        <h1>恭喜您，支付成功啦！</h1>
      </div>
      <div>
        <p>您已成功支付：￥{{ price }}元</p>
        <p>订单编号：{{ order_id }}</p>
      </div>
      <div> 
        <span>您还可以</span>
        <button>{{ count }}秒后返回首页</button>
        <router-link class="order" to="/personal?routeLink=PersonalDd"
          ><span>查看我的订单</span>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import PaysuccTitle from "@/components/PaysuccTitle.vue";
export default {
  name: "PaySuccess",
  data() {
    return {
      count: "", // 倒计时
      price: 0,
      order_id: "",
      a: [],
      datas: [],
    };
  },
  components: {
    PaysuccTitle,
  },
  created() {
    // 跳转首页
    this.$axios
      .get("/api/order/getUserOrder", {
        params: {
          user_id: localStorage.getItem("user_id"),
        },
      })
      .then((res) => {
        this.datas = res.data.results;
        this.datas.forEach((item) => {
          this.$axios.post("/api/order/changeOrder", {
            user_id: localStorage.getItem("user_id"),
            orders_id:item.orders_id,
            orders_pay_state:1,
            orders_total:this.$route.query.total_amount
          })
        });
      })
    this.price = this.$route.query.total_amount;
    this.order_id = this.$route.query.orderid;
    this.goChoicePeople();
  },
  methods: {
    //8秒后跳转到首页
    goChoicePeople() {
      const TIME_COUNT = 8;
      console.log("sss",this.timer);
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
            // 跳转到选人加分界面
            this.$router.push("/");
          }
        }, 1000);
      }
    },
  },
};
</script>

<style>
.paysucctitle {
  margin-top: 40px;
}
.paysuccdiv {
  width: 600px;
  height: 300px;
  margin: 80px auto;
}
.paysuccdiv p {
  font-size: 18px;
}
.paysuccdiv div:nth-child(1) {
  display: flex;
  margin-left: 95px;
}
.paysuccdiv div:nth-child(1) > h1 {
  position: relative;
  top: 40px;
}
.paysuccdiv div:nth-child(1) > img {
  width: 100px;
  margin-right: 20px;
}
.paysuccdiv div:nth-child(2) {
  display: flex;
  margin: 17px 5px;
}
.paysuccdiv div:nth-child(2) > p:nth-child(2) {
  margin-left: 50px;
}
.paysuccdiv div:nth-child(3) {
  margin-top: 30px;
  margin-left: 100px;
}
.paysuccdiv div:nth-child(3) > button {
  width: 170px;
  height: 50px;
  background-color: #ffa500;
  margin-left: 20px;
}
.paysuccdiv div:nth-child(3) > span:nth-child(1) {
  margin-left: 6px;
  font-size: 15px;
}
.paysuccdiv .order {
  font-style: 17px;
  margin-left: 40px;
  text-decoration: underline;
  color: #00f;
}
.paysucc .el-step__line-inner {
  display: none;
}
</style>